<template>
  <div class="index-container">
    <div class="index-header">
      <span>床位管理</span>
      <!-- <el-button
        type="primary"
        class="sureBtn"
        size="medium"
        @click="handleFastTk"
      >
        快速配置
      </el-button> -->
    </div>
    <div class="index-content">
      <el-row :gutter="20">
        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
          <div class="panel">
            <div class="panel-header clearfix">
              <h3 class="fl">楼栋(共{{ buildingData.length }}栋)</h3>
              <div class="fr">
                <el-button
                  type="primary"
                  class="sureBtn"
                  size="medium"
                  @click="handleBuildTK"
                >
                  新增楼栋
                </el-button>
              </div>
            </div>
            <div class="panel-main">
              <div ref="wrapper0" class="right-content">
                <ul>
                  <li
                    v-for="(item, index) in buildingData"
                    :key="item.id"
                    :data-id="item.id"
                    :data-name="item.name"
                    :data-index="index"
                    :class="{ active: bactive === index }"
                    @click="handleSelectBuilding(index, item.id, item.name)"
                  >
                    <h3 class="fl">{{ item.name }}</h3>
                    <div
                      class="fr deleteBtn"
                      @click.stop="handleDelteBuilding(item.id)"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                    <div
                      class="fr editBtn"
                      @click.stop="handleEditBuilding(item)"
                    >
                      <i class="el-icon-edit"></i>
                    </div>
                    <!-- <div class="fr editBtn"><i class="el-icon-edit"></i></div> -->
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
          <div class="panel">
            <div class="panel-header clearfix">
              <h3 class="fl">楼层(共{{ floorData.length }}层)</h3>
              <div class="fr">
                <el-button
                  type="primary"
                  class="sureBtn"
                  size="medium"
                  @click="handleFloor"
                >
                  新增楼层
                </el-button>
              </div>
            </div>
            <div class="panel-main">
              <div ref="wrapper1" class="right-content">
                <ul>
                  <li
                    v-for="(item, index) in floorData"
                    :key="item.id"
                    :data-id="item.id"
                    :data-name="item.name"
                    :data-index="index"
                    :class="{ active: factive === index }"
                    @click="handleSelectFloor(index, item.id, item.name)"
                  >
                    <h3 class="fl">{{ item.name }}</h3>
                    <div
                      class="fr deleteBtn"
                      @click.stop="handleDelteFloor(item.id)"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                    <!-- <div class="fr editBtn"><i class="el-icon-edit"></i></div> -->
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
          <div class="panel">
            <div class="panel-header clearfix">
              <h3 class="fl">房间(共{{ roomData.length }}间)</h3>
              <div class="fr">
                <el-button
                  type="primary"
                  class="sureBtn"
                  size="medium"
                  @click="handleRoom"
                >
                  新增房间
                </el-button>
              </div>
            </div>
            <div class="panel-main">
              <div ref="wrapper2" class="right-content">
                <ul>
                  <li
                    v-for="(item, index) in roomData"
                    :key="item.id"
                    :data-id="item.id"
                    :data-name="item.room_code"
                    :data-index="index"
                    :class="{ active: ractive === index }"
                    @click="handleSelectRoom(index, item.id, item.room_code)"
                  >
                    <h3 class="fl">{{ item.room_code }}</h3>
                    <div class="fr deleteBtn">
                      <i
                        class="el-icon-delete"
                        @click.stop="handleDelteRoom(item.id)"
                      ></i>
                    </div>
                    <!-- <div class="fr editBtn">
                      <i
                        class="el-icon-edit"
                        @click.stop="handleEditRoom(item.id)"
                      ></i>
                    </div> -->
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
          <div class="panel">
            <div class="panel-header clearfix">
              <h3 class="fl">床位(共{{ bedData.length }}个)</h3>
            </div>
            <div class="panel-main">
              <div ref="wrapper3" class="right-content">
                <ul>
                  <li
                    v-for="(item, index) in bedData"
                    :key="item.id"
                    :data-id="item.id"
                    :data-name="item.bed_code"
                    :data-index="index"
                  >
                    <h3 class="fl">{{ item.bed_code }}</h3>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="25%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="buildForm"
          :model="buildForm"
          :rules="rules"
          label-width="90px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="楼栋名称" prop="name">
                <el-input
                  v-model="buildForm.name"
                  placeholder="请填写楼栋名称"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="mini"
            @click="saveBuild"
          >
            确 定
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="mini"
            @click="cancel('buildForm')"
          >
            取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="新增楼层"
      :visible.sync="dialogVisibleFloor"
      width="25%"
      :before-close="closeDialogFloor"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="floorForm"
          :model="floorForm"
          :rules="rules"
          label-width="90px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="楼栋名称" prop="name">
                <el-input v-model="floorForm.name" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="楼层" prop="num">
                <el-select
                  v-model="floorForm.num"
                  clearable
                  placeholder="请选择楼层"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="1" value="1"></el-option>
                  <el-option :key="1" label="2" value="2"></el-option>
                  <el-option :key="2" label="3" value="3"></el-option>
                  <el-option :key="3" label="4" value="4"></el-option>
                  <el-option :key="4" label="5" value="5"></el-option>
                  <el-option :key="5" label="6" value="6"></el-option>
                  <el-option :key="6" label="7" value="7"></el-option>
                  <el-option :key="7" label="8" value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="mini"
            @click="saveFloor"
          >
            确 定
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="mini"
            @click="cancel('floorForm')"
          >
            取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="新增房间"
      :visible.sync="dialogVisibleRoom"
      width="25%"
      :before-close="closeDialogRoom"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="roomForm"
          :model="roomForm"
          :rules="rules"
          label-width="90px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="楼栋名称" prop="buildingName">
                <el-input
                  v-model="roomForm.buildingName"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="楼层" prop="floorName">
                <el-input
                  v-model="roomForm.floorName"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="房间类型" prop="type">
                <el-select
                  v-model="roomForm.type"
                  clearable
                  placeholder="请选择房间类型"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in bed_feesData"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="房间号" prop="code">
                <el-input v-model="roomForm.code" type="number"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="床位数" prop="bed_num">
                <el-select
                  v-model="roomForm.bed_num"
                  clearable
                  placeholder="请选择床位数"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="1" value="1"></el-option>
                  <el-option :key="1" label="2" value="2"></el-option>
                  <el-option :key="2" label="3" value="3"></el-option>
                  <el-option :key="3" label="4" value="4"></el-option>
                  <el-option :key="4" label="5" value="5"></el-option>
                  <el-option :key="5" label="6" value="6"></el-option>
                  <el-option :key="6" label="7" value="7"></el-option>
                  <el-option :key="7" label="8" value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="mini"
            @click="saveRoom"
          >
            确 定
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="mini"
            @click="cancel('roomForm')"
          >
            取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="快速配置"
      :visible.sync="dialogVisibleFast"
      width="25%"
      :before-close="closeDialogFast"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
          label-width="90px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="楼栋名称" prop="gender">
                <el-input v-model="formData.name" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="楼层" prop="gender">
                <el-select
                  v-model="formData.gender"
                  clearable
                  placeholder="请选择楼层"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="男" :value="0"></el-option>
                  <el-option :key="1" label="女" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="房间数" prop="gender">
                <el-select
                  v-model="formData.gender"
                  clearable
                  placeholder="请选择房间数"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="男" :value="0"></el-option>
                  <el-option :key="1" label="女" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="房间类型" prop="gender">
                <el-select
                  v-model="formData.gender"
                  clearable
                  placeholder="请选择房间类型"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="男" :value="0"></el-option>
                  <el-option :key="1" label="女" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button type="primary" class="sureBtn" size="mini">
            确 定
          </el-button>
          <el-button type="info" class="setBtn" size="mini">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import BScroll from "better-scroll";
  import { getBuilding, getFloor, getRoom, getBed } from "@/api/building";
  import { getList } from "@/api/bedType";
  import { getBedType } from "@/api/bedType";
  export default {
    name: "Index",
    components: {},
    data() {
      return {
        dialogVisible: false,
        dialogVisibleFloor: false,
        dialogVisibleRoom: false,
        dialogVisibleFast: false,
        BS: [],
        bactive: 0,
        factive: 0,
        ractive: 0,
        building_id: "",
        floor_id: "",
        room_id: "",
        bed_id: "",
        roomTypeData: [],
        buildingData: [],
        floorData: [],
        roomData: [],
        bedData: [],
        floorForm: {},
        buildForm: {},
        roomForm: {},
        formData: {},
        title: '新增楼栋',
        rules: {
          name: [
            { required: true, message: "请输入、选择名称", trigger: "blur" },
          ],
          buildingName: [
            { required: true, message: "请输入、选择名称", trigger: "blur" },
          ],
          floorName: [
            { required: true, message: "请输入、选择名称", trigger: "blur" },
          ],
          code: [{ required: true, message: "请输入房间号", trigger: "blur" }],
          bed_type: [
            { required: true, message: "请选择床位类型", trigger: "blur" },
          ],
          building_id: [
            { required: true, message: "请选择楼栋", trigger: "blur" },
          ],
          num: [{ required: true, message: "请选择楼层数", trigger: "change" }],
        },
        bed_feesData: [],
      };
    },
    computed: {
      bed_type: {
        get: function () {
          return this.roomForm.type == 1
            ? "自理型"
            : this.roomForm.type == 2
            ? "介助型"
            : this.roomForm.type == 3
            ? "介护型"
            : this.roomForm.type == 4
            ? "特护型"
            : "";
        },
        set: function (value) {
          this.roomForm.type =
            value === "自理型"
              ? "1"
              : value === "介助型"
              ? "2"
              : value === "介护型"
              ? "3"
              : value === "特护型"
              ? "4"
              : "";
        },
      },
    },
    created() {},
    mounted() {
      this.getTableData();
      this.getRoomType();
      this.scrollInit();
      this.getBedTypeData();
    },
    beforeDestroy() {
      this.scrollDestroy();
    },
    methods: {
      getBedTypeData(data) {
        getBedType("get", data).then((resp) => {
          if (resp.code === 200) {
            let data = resp.data.list;
            this.bed_feesData = data;
          }
        });
      },
      getTableData(data) {
        getBuilding("get", data).then((resp) => {
          if (resp.code === 200) {
            this.buildingData = resp.data.list;
            if (this.buildingData.length == 0) {
              this.floorData = [];
              this.roomData = [];
              this.bedData = [];
              return false;
            }

            this.building_id = this.buildingData[0].id;
            this.$set(this.floorForm, "name", this.buildingData[0].name);
            this.$set(this.roomForm, "buildingName", this.buildingData[0].name);
            this.$set(this.floorForm, "building_id", this.building_id);

            let params = {
              building_id: this.building_id,
            };
            this.getFloorData(params);
          }
        });
      },
      getRoomType(data) {
        getList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.roomTypeData = resp.data.list;
          }
        });
      },
      getFloorData(data) {
        getFloor("get", data).then((resp) => {
          if (resp.code === 200) {
            this.floorData = resp.data.list;
            if (this.floorData.length == 0) {
              this.roomData = [];
              this.bedData = [];
              return false;
            }
            this.floor_id = this.floorData[0].id;
            this.$set(this.roomForm, "floorName", this.floorData[0].name);
            this.$set(this.roomForm, "floor_id", this.floor_id);

            let params = {
              floor_id: this.floor_id,
            };
            this.getRoomData(params);
          }
        });
      },
      getRoomData(data) {
        getRoom("get", data).then((resp) => {
          if (resp.code === 200) {
            this.roomData = resp.data.list;
            if (this.roomData.length == 0) {
              this.bedData = [];
              return false;
            }
            this.room_id = this.roomData[0].id;
            let params = {
              room_id: this.room_id,
            };
            this.getBedData(params);
          }
        });
      },
      getBedData(data) {
        getBed("get", data).then((resp) => {
          if (resp.code === 200) {
            this.bedData = resp.data.list;
          }
        });
      },
      saveBuild() {
        this.$refs["buildForm"].validate(async (valid) => {
          if (valid) {
            if (this.buildForm.id) {
              getBuilding("put", this.buildForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.getTableData();
                  this.cancel();
                }
              });
            } else {
              getBuilding("post", this.buildForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.getTableData();
                  this.cancel();
                }
              });
            }
          }
        });
      },
      saveFloor() {
        this.$refs["floorForm"].validate(async (valid) => {
          if (valid) {
            if (this.floorForm.id) {
              getFloor("put", this.floorForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.getTableData();
                  this.cancel();
                }
              });
            } else {
              getFloor("post", this.floorForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.getTableData();
                  this.cancel();
                }
              });
            }
          }
        });
      },
      saveRoom() {
        console.log(this.roomForm);
        this.$refs["roomForm"].validate(async (valid) => {
          if (valid) {
            if (this.roomForm.id) {
              getRoom("put", this.roomForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  let params = {
                    floor_id: this.floor_id,
                  };
                  this.getRoomData(params);
                  this.cancel();
                }
              });
            } else {
              getRoom("post", this.roomForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  let params = {
                    floor_id: this.floor_id,
                  };
                  this.getRoomData(params);
                  this.cancel();
                }
              });
            }
          }
        });
      },
      cancel(formName) {
        this.dialogVisible = false;
        this.dialogVisibleFloor = false;
        this.dialogVisibleRoom = false;
      },
      handleSelectBuilding(index, id, name) {
        let cid = id;
        let cname = name;
        let cindex = index;
        this.bactive = cindex;
        this.building_id = cid;
        this.$set(this.floorForm, "name", cname);
        this.$set(this.floorForm, "building_id", cid);
        this.$set(this.roomForm, "buildingName", cname);
        let params = {
          building_id: cid,
        };
        this.getFloorData(params);
      },
      handleSelectFloor(index, id, name) {
        let cid = id;
        let cname = name;
        let cindex = index;
        this.factive = cindex;
        this.floor_id = cid;
        this.$set(this.roomForm, "floorName", cname);
        this.$set(this.roomForm, "floor_id", cid);
        let params = {
          floor_id: cid,
        };
        this.getRoomData(params);
      },
      handleSelectRoom(index, id, name) {
        let cid = id;
        let cname = name;
        let cindex = index;
        this.ractive = cindex;
        this.room_id = cid;
        let params = {
          room_id: cid,
        };
        this.getBedData(params);
      },
      handleEditBuilding (item) {
        this.title = '编辑楼栋'
        this.buildForm = { ...this.buildForm, ...{ id: item.id, name: item.name } }
        this.dialogVisible = true;
      },
      handleDelteBuilding(id) {
        this.$confirm("此操作将永久删除该楼栋, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: id,
            };
            getBuilding("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getTableData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleDelteFloor(id) {
        this.$confirm("此操作将永久删除该楼层, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: id,
            };
            getFloor("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getTableData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleDelteRoom(id) {
        this.$confirm("此操作将永久删除该房间, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: id,
            };
            getRoom("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                let params = {
                  floor_id: this.floor_id,
                };
                this.getRoomData(params);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      changeRoomType(v1) {
        for (let i = 0; i < this.roomTypeData.length; i++) {
          const element = this.roomTypeData[i];
          if (element.id === v1) {
            this.$set(this.roomForm, "bed_num", element.bed_num);
            this.$set(this.roomForm, "deposit", element.deposit);
            this.$set(this.roomForm, "type", element.type);
            console.log(element.id);
            this.$set(this.roomForm, "money", element.price);
          }
        }
      },
      scrollInit() {
        this.BS[0] = new BScroll(this.$refs["wrapper0"], {
          mouseWheel: true,
          click: true,
          scrollbar: {
            fade: true,
            interactive: false,
          },
        });
        this.BS[1] = new BScroll(this.$refs["wrapper1"], {
          mouseWheel: true,
          click: true,
          scrollbar: {
            fade: true,
            interactive: false,
          },
        });
        this.BS[2] = new BScroll(this.$refs["wrapper2"], {
          mouseWheel: true,
          click: true,
          scrollbar: {
            fade: true,
            interactive: false,
          },
        });
        this.BS[3] = new BScroll(this.$refs["wrapper3"], {
          mouseWheel: true,
          click: true,
          scrollbar: {
            fade: true,
            interactive: false,
          },
        });
      },
      scrollDestroy() {
        if (this.BS) {
          this.BS[0].destroy();
          this.BS[1].destroy();
          this.BS[2].destroy();
          this.BS[3].destroy();
          // this.scroll.refresh
        }
      },
      handleFastTk() {
        this.dialogVisibleFast = true;
      },
      handleBuildTK() {
        this.title = '新增楼栋'
        this.dialogVisible = true;
      },
      handleFloor() {
        this.dialogVisibleFloor = true;
      },
      handleRoom() {
        this.dialogVisibleRoom = true;
      },
      handleEditRoom(id) {
        this.dialogVisibleRoom = true;
        let data = {
          id: id,
        };
        getRoom("get", data).then((resp) => {
          if (resp.code === 200) {
            console.log(resp);
          }
        });
      },
      closeDialog() {
        this.dialogVisible = false;
      },
      closeDialogFloor() {
        this.dialogVisibleFloor = false;
      },
      closeDialogRoom() {
        this.dialogVisibleRoom = false;
      },
      closeDialogFast() {
        this.dialogVisibleFast = false;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .index-header {
      margin-bottom: 16px;

      span {
        padding-right: 30px;
        font-size: 16px;
        color: #333;
      }
    }

    .index-content {
      .panel {
        border: 1px solid #dddfe7;

        .panel-header {
          height: 88px;
          padding: 0 24px;
          line-height: 88px;
          border-bottom: 1px solid #dddfe7;

          h3 {
            font-size: 20px;
            font-weight: 500;
            color: #1791ff;
          }
        }

        .panel-main {
          .right-content {
            height: 816px;
            overflow: hidden;

            ul {
              li {
                box-sizing: border-box;
                width: 100%;
                height: 40px;
                padding: 0 23px;
                line-height: 40px;
                cursor: pointer;

                &.active {
                  background: #f6f7fa;

                  div {
                    i {
                      display: inline-block;
                    }
                  }
                }

                &:hover {
                  background: #f6f7fa;

                  div {
                    i {
                      display: inline-block;
                    }
                  }
                }

                h3 {
                  font-size: 16px;
                  font-weight: normal;
                  color: #333;
                }

                div {
                  line-height: 40px;

                  &.deleteBtn {
                    margin-right: 24px;
                  }

                  &.editBtn {
                    margin-right: 24px;
                  }

                  i {
                    display: none;
                    font-size: 16px;
                    color: #1791ff;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
      }
    }

    .form-footer {
      padding-left: 100px;
    }
  }
</style>
